@import "base.css";

.container {
    /* 自身样式 */
    width: 60vw;
    height: 90vh;
    min-width: 600px;
    min-height: 400px;
    margin: 5vh auto;
    border-radius: 6px;
    /* 阴影颜色 左右偏 上下偏 虚影 实影 */
    box-shadow:0 0 6px 4px gray; 
    overflow: hidden;
    /* 内部元素布局 */
    display: flex;
    flex-direction: column;
}
.header {
    text-align:center;
    padding: 10px;
    background-color: white;

    display: flex;
}
.body {
    flex-grow: 1;

    display: flex;
    flex-direction: row;
}
.body .player-list {
        width: 20%;
        background: deepskyblue;
    }
.body .chat {
        width: 80%;

        display: flex;
        flex-direction: column;
    }
.body .chat .chat-msg {
            height: 70%;
            background:lightcoral;

            
        }
.body .chat .chat-input {
            height: 30%;
            background: khaki;
            /*  */
            display: flex;
            flex-direction: column;
        }
.body .chat .chat-input .inputbox {
                        height: 70%;
}